<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">

  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">

    <child>
      <!-- 插槽a的具体实现 -->
      <div slot="a">aaaaaaaaaaaa</div>
      
      <!-- 插槽b的具体实现 -->
      <div slot="b">bbbbbbbbbbbb</div>
    </child>

    <swiper>
      <!--插槽实现ul中的细节-->
      <li v-for="data in datalist">
        {{data}}
      </li>
    </swiper>

  </div>


  <script type="text/javascript">

    Vue.component("child", {
      template: `<div>
          <!-- 插槽a定义 -->
          <slot name="a"></slot>
           
          <!-- 其它内容 -->
          child

          <!-- 插槽b定义 -->
          <slot name="b"></slot>  
      </div>`
    })

    Vue.component("swiper", {
      template: `<div>
            <ul>
              <!--插槽实现ul中的细节-->
              <slot></slot>
            </ul>
          </div>`
    })

    new Vue({
      el: "#box",
      data: {
        datalist: ["11111", "22222", "333333"]
      }
    })
    
  </script>
</body>

</html>